<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css"/>-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../css/message.css">
    <title>登入</title>
</head>
<body>

<div id="login" v-loading="loading">
    <div class="divHead">登录</div>
    <div class="divContainer">
        <el-input placeholder=" 请输入手机号码" v-model="form.phone" maxlength='20'/>
        </el-input>
        <div class="divSplit"></div>
        <el-input placeholder=" 请输入验证码" v-model="form.code" maxlength='20'/>
        </el-input>
        <span @click='getCode'>获取验证码</span>
    </div>
    <div class="divMsg" v-if="msgFlag">手机号输入不正确，请重新输入</div>
    <el-button type="primary" :class="{btnSubmit:1===1,btnNoPhone:!form.phone,btnPhone:form.phone}" @click="btnLogin">
        登录
    </el-button>
</div>


</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<!--<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: "#login",
        data: {
            form: {
                phone: '',
                code: ''
            },
            msgFlag: false,
            loading: false

        },
        methods:{
            getCode(){
                const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
                if (regex.test(this.form.phone)) {
                    this.msgFlag = false
                    //this.form.code = (Math.random()*1000000).toFixed(0)
                    axios.get(`/font/getCode?phone=${this.form.phone}`);
                }else{
                    this.msgFlag = true
                }

            },
            btnLogin(){

                axios.get('/font/login',{
                    params:{
                        phone:this.form.phone,
                        code:this.form.code
                    }
                })
                    .then(res =>{
                        if(res.data.code == 20041){
                            localStorage.setItem("token",res.data.data)
                            location.href = "/font/index.html";
                        }else {
                            this.$message.warning(res.data.message);
                        }
                    })
                    .catch(err =>{
                        this.$message.error("未知错误，请稍后再试");
                    })
            },
        },
        mounted() {


        },
    })
</script>


</html>